<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>南声-登录</title>
		<link rel="stylesheet" type="text/css" href="./css/login.css" />
		<link rel="stylesheet" type="text/css" href="./css/reset.css" />
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2673097_g8rbo5ot3lb.css" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="./js/api.js"></script>
	</head>
	<body>
		<div id="app" class="container">
			<div class="imgContent"></div>
			<div class="loginData">
				<div class="websiteName">
					<h3>南声-分享源于热爱</h3>
				</div>
				<div class="info">
					<input id="username" type="text" placeholder="请输入用户名" v-model="loginData.email">
					<span>请输入用户名</span>
				</div>
				<div class="info">
					<input id="password" type="password" placeholder="请输入用户密码" v-model="loginData.password">
					<span>请输入用户密码</span>
				</div>
				<div class="info">
					<button id="submitLogin" @click="submitLogin" type="button">登 录</button>
				</div>
				<div class="userOperation">
					<a href="./regist.html">创建一个 ID</a>
				</div>
				<div class="userOperation">
					<a href="#">忘记密码?</a>
				</div>
				<div>
					<i class="iconfont icon-wechat"></i>
					<i class="iconfont icon-qq"></i>
					<i class="iconfont icon-github"></i>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			let app = new Vue({
				el: '#app',
				data: {
					loginData: {
						email: '',
						password: ''
					}
				},
				methods: {
					submitLogin() {
						if (this.loginData.email != null && this.loginData.password != null && this.loginData.email
							.trim() != '' && this.loginData.password.trim() != '') {
							// 发送登录请求
							postRequest('http://localhost:8080/user/doLogin', this.loginData).then(resp => {
								if (resp.data) {
									if (resp.data.code == 200) {
										// 保存登录用户信息
										let userData = resp.data.data;
										window.sessionStorage.setItem('loginer', JSON.stringify(userData));
										// 跳转index页面
										window.location.href = './index.html';
									} else {
										alert(resp.data.msg);
									}
								}
							})
						} else {
							alert('请正确填写信息');
						}
					}
				}
			})
		</script>
	</body>
</html>
